// src/views/category/composables/useCategory.js

import { getCategoryWithGoodsAPI } from '@/apis/category' // 确保导入的是新API
import { useRoute, onBeforeRouteUpdate } from 'vue-router'
import { ref, onMounted } from 'vue'

export const useCategory = () => {
  // 关键修改：给 categoryData 加初始值，避免 undefined
  const categoryData = ref({
    topCategoryGoods: [], // 初始为空数组
    children: [],         // 子分类初始也为空数组
    name: ''              // 分类名称初始为空字符串
  });
  const route = useRoute();

  const getCategoryData = async (id = route.params.id) => {
    const res = await getCategoryWithGoodsAPI(id);
    console.log("后端返回的原始数据：", res.data); // 现在输出正确的分类数据

    // 直接使用 res.data 进行映射（因为后端返回就是分类数据）
    if (res.data) {
      const rawData = res.data;
      categoryData.value = {
        id: rawData.id,
        name: rawData.name,
        topCategoryGoods: rawData.topCategoryGoods || [], // 直接取 rawData 的 topCategoryGoods
        children: (rawData.subCategories || []).map(subCat => ({
          id: subCat.categoryId,
          name: subCat.categoryName,
          picture: subCat.categoryPic || "",
          goods: subCat.goods || []
        }))
      };
      console.log("映射后的数据：", categoryData.value.topCategoryGoods); // 现在会输出 Array(3)
    } else {
      console.error("接口返回异常，没有 data 字段");
    }
  };

  onMounted(() => getCategoryData());
  onBeforeRouteUpdate((to) => getCategoryData(to.params.id));

  return { categoryData };
};